import React,{ useState, useEffect } from 'react'
import { Image, StyleSheet, Text, View, FlatList,TouchableOpacity, TouchableWithoutFeedback } from 'react-native'
import Header from './components/Header';
import { Carousel } from '@ant-design/react-native';
import { useNavigation } from '@react-navigation/core';

interface Props {
  
}

const  Swiper = () => {
  const [bannerList, setbannerList] = useState([])
  useEffect(() => {
    fetch('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
      setbannerList(res.data)
    })
  }, [])
  return (
    <View style={styles.swiper}>
      <Carousel
      selectedIndex={2}
      autoplay
      infinite
      >
        { bannerList && bannerList.map((item:any)=>{
          return(
            <View key={ item.bannerid } style={styles.containerHorizontal}>
              <Image style={{ width:'100%',height:200,}} source={{uri: item.img}}/>
            </View>
          )
        })}
      </Carousel>
    </View>
    
  )
}

const Item = ({item,onPress}:any) => {
  return (
    <TouchableOpacity onPress={ onPress }>
      <View style={ styles.proItem }>
        <Image style={ styles.itemImage } source = {{ uri: item.img1 }} />
        <View style={ styles.itemText }>
          <Text>{ item.proname }</Text>
        </View>
      </View>
    </TouchableOpacity>
  )
}

const Home = (props: Props) => {
  const [proList, setproList] = useState([])
  const [count, setcount] = useState(2)
  const [refreshing, setRefreshing] = useState(false)
  const listRef =React.useRef<any>()
  const navigate = useNavigation()
  useEffect(() => {
    fetch('http://121.89.205.189/api/pro/list')
    .then(res=>res.json())
    .then(res => {
      setproList(res.data)
    })
  }, [])
  const onEndReached = () => {
    fetch('http://121.89.205.189/api/pro/list?limitNum=10&count=' + count)
    .then(res => res.json())
    .then(res => {
      if (res.data.length === 0 ) {
        console.log("没有数据了");
      } else {
        setproList([...proList, ...res.data])
        setcount( count + 1 )
      }
    })
  }
  const onRefresh = () => {
    setRefreshing(true)
    fetch('http://121.89.205.189/api/pro/list')
      .then(res => res.json())
      .then(res => {
        setRefreshing(false)
        setcount(2)
        setproList(res.data)
      })
  }
  const backtop = () => {
    // 返回顶部看不到轮播图区域
    // listRef.current.scrollToIndex({
    //   index: 0
    // })
    listRef.current.scrollToOffset({
      offset: 0
    })
  }
  const renderItem = ({item}:any) => {
    const toDetail = (id:any) => {
      navigate.navigate("/detail",{proid:id})
    }
    return (
      <Item
          item={item}
          onPress={() => toDetail(item.proid)}
      />
    )
  }
  return (
    <View style={styles.container}>
       <Header editable={false} />
       <View style={styles.content}>
        <FlatList 
          ref = { listRef }
          data = { proList }
          renderItem = { renderItem }
          keyExtractor = { (item:any) => item.proid }
          onEndReached = { onEndReached }
          refreshing = { refreshing }
          onRefresh = { onRefresh }
          ListHeaderComponent = { <Swiper /> }
        >
        </FlatList>
       </View>
       
       <TouchableWithoutFeedback
          onPress = { backtop }
        >
          <View style={ styles.backtop }>
            <Text>⬆️</Text>
          </View>
        </TouchableWithoutFeedback>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({
  container:{
    flex:1
  },
  content: {
    width: '100%',
    flex: 1,
  },
  swiper:{
    marginTop:10,
    marginRight:10,
    marginLeft:10,
    borderRadius:15,
    height: 150,
    overflow: 'hidden',
    flex: 1,
  },
  containerHorizontal: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 150,
  },
  proItem: {
    display: 'flex',
    flexDirection: 'row',
    marginLeft: 10,
    marginRight: 10,
    marginTop: 5,
    marginBottom: 5,
    borderRadius:15,
    backgroundColor:'#d6d6d6df',
    padding: 10,
  },
  itemImage: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderRadius:15,
    // borderStyle: 'solid',
    borderColor: '#f66'
  },
  itemText:{
    // backgroundColor:'#ff3',
    flex:1
  },
  backtop: {
    position: 'absolute',
    bottom: 10,
    right: 10,
    width: 30,
    height: 30,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
})
